<style>
	input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
	background-color: #ffffff;
	border: 1px solid #cccccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
	-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
	-o-transition: border linear 0.2s, box-shadow linear 0.2s;
	transition: border linear 0.2s, box-shadow linear 0.2s;
	}

	#pop{
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		margin-left:-150px;
		margin-top:-100px;
		min-width:300px;
		height:200px;
		overflow: auto;

		padding: 8px 4px 14px;
		background-color: #fff;
		border: 1px solid #ddd;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}

	.ui-widget-content{
		list-style: none;
		background-color: #ddd;
		width: 200px;
		padding: 8px 4px 8px;
		background-color: #fff;
		border: 1px solid #ddd;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}

	a{
		text-decoration: none;
		cursor: pointer;
	}

</style>



<script type="text/javascript">
var obj_pessoa = "";

$(function() {
	var id_div = $(this).children().attr('id');
	var url = location.href;
	var url_split = url.split("/");
	url_pesquisa = "/"+url_split[3]+"/Funcionario/buscarPessoasAjax";

	var availableTags = url_pesquisa;

    $( "input[type='search']" ).autocomplete({
		source: availableTags,
			messages: {
				noResults: '',
				results: function() {}
			},
		minLength: 3,
		select: function( event, ui ) {

      	},
      	search: function( event, ui ) {

      	},
      	response: function( event, ui){
      		preencheTabelaPessoas(this.value);
      	}
    });

    function preencheTabelaPessoas(nome){
		$.get(url_pesquisa,{ term: nome},
			function(data) {
			obj_pessoa = data;
			jQuery.each(data, function(i, val) {
			  $( "#users tbody" ).empty();

			  $( "#users tbody" ).append( 
			  	"<tr  onclick=preencheForm('" + val.id +"')>" +
			  	"<td>" + val.id + "</td>" +
					"<td>" + val.nome + "</td>" +
					"<td>" + val.email + "</td>" +
					"<td>" + val.telefone + "</td>" +
					"<td>" + val.area + "</td>" +
					"<td>" + val.unidade + "</td>" +
				"</tr>" );
			});
		}, "json");
    }

  });

	function preencheForm(indice){
		$('form').find("input[type=text], input[type=select]").val("");
		$("#id_pessoa").val(obj_pessoa[indice].id);
		$("#nome").val(obj_pessoa[indice].nome);
		$("#telefone").val(obj_pessoa[indice].telefone);
		$("#email").val(obj_pessoa[indice].email);
		$("#UnidadeId").val(obj_pessoa[indice].id_unidade);
		$("#AreaId").val(obj_pessoa[indice].id_area);
		$("#StatusId").val(obj_pessoa[indice].id_status_pessoa);

		$("#id_site").val(obj_pessoa[indice].id_site);
		$("#id_fugro_network").val(obj_pessoa[indice].id_fugro_network);
		$("#id_servidor").val(obj_pessoa[indice].id_servidor);
		$("#id_protheus").val(obj_pessoa[indice].id_protheus);

		if(obj_pessoa[indice].analista_chamado == 1){
			$("#analista_chamado").prop("checked", true);
		}
		else{
			$("#analista_chamado").prop("checked", false);
		}

	}
</script>
<div id="pop">
	<input type="search" name='nome' placeholder="Digite o nome."></input>
	<a href="#" onclick="document.getElementById('pop').style.display='none';">[Fechar]</a>
	<table id="users" class="table table-striped table-bordered mouse-pointer" >
	<thead>
	  <tr class="ui-widget-header ">
	  	<th>Id</th>
	    <th>Name</th>
	    <th>Email</th>
	    <th>Telefone</th>
	    <th>Área</th>
	    <th>Unidade</th>
	  </tr>
	</thead>
	<tbody>
	  <tr>
	  	<!-- TABELA MONTADA POR AJAX -->
	  </tr>
	</tbody>
	</table>
</div>

</head>
<body>